<template>
  <div class="table-box">
    <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getWorkerViewApi">
      <template #avator="scope">
        <div class="left-box">
          <img :src="getAvatorUrl(scope.row.avator)" alt="用户头像" />
        </div>
        <el-badge is-dot class="marker-dot" :type="scope.row.flagIdentity == 'Y' ? 'success' : 'danger'">&nbsp;</el-badge>
      </template>
      <template #name="scope">
        <div class="work-info-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          <div class="right-box">
            <div class="info-item">
              <span class="info-info info-b">{{ scope.row.name }}</span>
              <!-- <el-tag
                v-if="scope.row.markerType"
                class="ml-2"
                :type="markerType(scope.row.markerType)"
                size="small"
                >{{ filterEnum(scope.row.markerType, workerMarkType) }}</el-tag
              > -->
            </div>
            <div class="info-item mt-10">
              <span class="info-info info-s">{{ filterEnum(scope.row.gender, genderType) }} </span>|
              <span class="info-info info-s">{{ getAge(scope.row.birthDay) }}&nbsp;岁</span>|
              <span class="info-info info-s">{{ scope.row.eduContent }} </span>|
              <span class="info-info info-s">{{ scope.row.workYearContent }}</span>
            </div>
          </div>
        </div>
      </template>
      <template #jobTitle="scope">
        <div class="apply-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          <div class="job-title">
            {{ scope.row.jobTitle }}
          </div>
          <div class="job-date">
            <span class="job-data-title">浏览时间：</span>
            <span class="job-data-info">{{ scope.row.viewDate }}</span>
          </div>
        </div>
      </template>
      <template #experiences="scope">
        <div class="experience-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          <el-scrollbar max-height="90px">
            <div class="worker-exp-wrapper" v-for="(item, index) in scope.row.experiences" :key="index">
              <div class="info-item">
                <span class="title-info">{{ dateYMSpan(item.timespan) }}</span>
              </div>
              <div class="info-item">
                <span class="info-info">[{{ dateDateSpan(item.timespan) }}]</span>
                <span class="info-info">{{ item.companyName }}</span>
                <span class="info-info">{{ item.jobPosition }}</span>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </template>
      <template #expSalary="scope">
        <div class="expsalary-wrapper" @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
          <div class="info-item">
            <span class="title-info">期望城市:</span><span class="info-b">{{ scope.row.expCity }}</span>
          </div>
          <div class="info-item">
            <span class="title-info">期望薪资:</span><span>{{ scope.row.expSalaryStart }}&nbsp;-&nbsp;</span>
            <span>{{ scope.row.expSalaryEnd }}&nbsp;元&nbsp;</span>
          </div>
          <div class="info-item">
            <!-- <span class="title-info">期望岗位:</span> -->
            <el-tag v-for="(tag, idx) in getTags(scope.row.expJobTypeNames)" :key="idx">
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </template>
      <template #lastLoginDate="scope">
        {{ dateStr(scope.row.lastLoginDate) }}
      </template>
      <template #operation="scope">
        <el-button
          :type="scope.row.flagSee == 'Y' ? 'success' : 'danger'"
          :icon="Download"
          @click="handleOpenDialog(OptEnum.EDIT, scope.row)"
        >
          {{ scope.row.flagSee == "Y" ? "已下载" : "下载工友" }}
        </el-button>
        <el-button type="primary" @click="handleCommunicate(scope.row)"> 直接沟通 </el-button>
      </template>
    </ProTable>
    <WorkerDialog ref="dialogRef" @refresh-list="handleRefreshList" />
    <WorkerGroupDialog ref="wgdialogRef" @refresh-list="handleRefreshList" />
    <WorkerMarkerDialog ref="wmdialogRef" @refresh-mark="handleRefreshList" />
    <JobInterviewDialog ref="jvDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { getWorkerViewApi } from "@/api/modules/cpyswk/wk";
// import { exportOneWorkerApi } from "@/api/modules/cpyswk/mgr";
import { ColumnProps } from "@/components/ProTable/interface";
import defaultAvatar from "@/assets/images/davator.png";
import { OptEnum } from "@/biz/eenum/appEnum";
import { filterEnum } from "@/utils";
import { genderType } from "@/biz/datas/sysData";
import { getAge, dateStr, dateYMSpan, dateDateSpan } from "@/utils";
import { Download } from "@element-plus/icons-vue";
import WorkerDialog from "../components/WorkerDialog.vue";
import WorkerGroupDialog from "../components/WorkerGroup.vue";
import WorkerMarkerDialog from "../components/WorkerMarker.vue";
import JobInterviewDialog from "../../common/JobInterview.vue";

import { getUserDetails } from "@/api/modules/user";
import router from "@/routers";

const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({});
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 60, fixed: "left" },
  // { type: "index", label: "#", width: 60 },
  {
    prop: "avator",
    label: "头像",
    width: 80
  },
  {
    prop: "name",
    label: "工友信息",
    width: 200
  },
  {
    prop: "jobTitle",
    label: "浏览岗位"
  },
  {
    prop: "expSalary",
    label: "求职意向"
  },
  {
    prop: "experiences",
    label: "工作经验"
  },
  {
    prop: "lastLoginDate",
    label: "最近登录",
    width: 100
  },
  {
    prop: "operation",
    width: 260,
    fixed: "right",
    label: "操作"
  }
];

const getAvatorUrl = (aurl: string) => {
  let url = defaultAvatar;
  if (aurl) {
    url = aurl;
  }
  return url;
};

const getTags = computed(() => {
  return (tagsStr: string): string[] => {
    let tags: string[] = [];
    if (tagsStr && tagsStr.length) {
      tags = tagsStr.split(",");
    }
    return tags;
  };
});

// const markerType = computed(() => (mtype: number) => {
//   if (mtype) {
//     if (mtype == 1) {
//       return "success";
//     } else if (mtype == 2) {
//       return "warning";
//     } else if (mtype == 3) {
//       return "danger";
//     } else if (mtype == 4) {
//       return "info";
//     }
//   }
//   return "primary";
// });

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

// const handleRefreshMarker = () => {
//   console.log("刷新标注");
// };

const handleCommunicate = row => {
  router.push({
    path: "/im/index",
    query: {
      userId: row.userId
    }
  });
};

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  dialogRef.value.acceptParams(params);
};

// const handleOutputOneWorker = async (workerId: string) => {
//   // console.log("导出一个工友", workerId);
//   const res = await exportOneWorkerApi({ id: workerId });
//   if (res) {
//     let fileName = "worker.xlsx"; // 文件名
//     let blob = new Blob([res], {
//       type: "application/vnd.ms-excel"
//     });
//     // console.log("blobblobblob", blob);
//     let elink = document.createElement("a");
//     elink.download = fileName;
//     elink.style.display = "none";
//     elink.target = "_blank";
//     elink.href = URL.createObjectURL(blob);
//     document.body.appendChild(elink);
//     elink.click();
//     URL.revokeObjectURL(elink.href); // 释放URL对象
//     document.body.removeChild(elink);
//   }
// };

// // 打开分组
// const wgdialogRef = ref();
// const handleOpenWorkGroupDialog = (optType: OptEnum, workerId: string) => {
//   let params = {
//     optType: optType,
//     workerId
//   };
//   wgdialogRef.value.acceptParams(params);
// };

// const wmdialogRef = ref();
// const handleOpenWorkMarkerDialog = (optType: OptEnum, id: string) => {
//   let params = {
//     optType: optType,
//     id
//   };
//   wmdialogRef.value.acceptParams(params);
// };

// // 打开 dialog(新增、查看、编辑)
// const jvDialogRef = ref();
// const handleAddInterView = (workerIds: string[], jobId: string) => {
//   let params = {
//     optType: OptEnum.EDIT,
//     rowData: { workerIds, jobId }
//   };
//   jvDialogRef.value.acceptParams(params);
// };
</script>

<style scoped lang="scss">
.left-box {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  // border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  position: relative;

  img {
    height: 60px;
    width: 60px;
  }
}

.info-item {
  display: flex;
  font-size: 0.8em;
  font-weight: 600;
  overflow: hidden;

  .title-info {
    color: var(--el-color-info);
    font-weight: 300;
  }

  & .el-tag {
    margin-right: 0.5rem;
  }

  .info-b {
    font-weight: 600;
    font-size: 1rem;
    color: var(--el-color-info);
    margin-bottom: 5px;
  }

  .info-s {
    font-size: 0.8rem;
    color: var(--el-color-info);
  }

  .info-info {
    margin: 0 5px;
  }
}

.apply-wrapper {
  // border: 1px solid red;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;

  .job-title {
    width: 100%;
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    // border: 1px solid red;
    // display: flex;
    // & .el-tag {
    //   margin-right: 0.5rem;
    // }
  }
  .job-date {
    display: flex;
    align-items: center;
    // flex-direction: row-reverse;

    .job-data-title {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--el-color-info-light-5);
    }

    .job-data-info {
      font-size: 0.9rem;
      color: var(--el-color-info);
      font-weight: 600;
    }
  }
}

.phone-info {
  margin: 0 5px;
  font-weight: 600;
}

.ml-2 {
  margin: 0 10px;
  font-size: 0.8rem;
}

.mt-10 {
  margin: 3px 0px;
}

.worker-exp-wrapper {
  margin-bottom: 3px;
}

.info-identity {
  border: 1px solid green;
  border-radius: 4px;
  padding: 0;
  .phone-identity {
    padding: 0;
    margin: 0 5px;
  }
}

.marker-dot {
  transform: translateX(30px);
}

.experience-wrapper {
  width: 100%;
  height: 80px;
  // border: 1px solid red;
}

.expsalary-wrapper {
  width: 100%;
  height: 80px;
}
</style>
